<template>
  <div id="file-input"></div>
  <!-- <input type="file" name="load" id="file-input" /> -->
</template>
<script setup>
import { ref } from "vue";
// 引入three.js
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 引入
// import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";

// // 1、
// const publicPath = ref(process.env.BASE_URL);
// console.log(publicPath);

// 创建三维场景
const scene = new THREE.Scene();

// 创建一个 OBJLoader 的实例
// const loader = new OBJLoader();

// 创建STL加载器;
// var stlLoader = new STLLoader();
// stlLoader.load(
//   "../public/2c0f9b98-0a04-4ba1-a200-5604c44bc247.stl",
//   (geometry) => {
//     var material = new THREE.MeshPhongMaterial({ color: 0xdddada });
//     var mesh = new THREE.Mesh(geometry, material);
//     // mesh.position.x = -300;
//     mesh.position.z = -800;
//     scene.add(mesh);
//   }
// );
var stlLoader = new STLLoader();
const input = document.getElementById("file-input");
input.addEventListener(
  "change",
  (changed) => {
    console.log(changed);
    const file = changed.target.files[0];
    console.log(file);
    var ifcURL = URL.createObjectURL(file);
    console.log(ifcURL);
    // ifcLoader.load(ifcURL, (ifcModel) => scene.add(ifcModel));
    stlLoader.load(ifcURL, (geometry) => {
      var material = new THREE.MeshPhongMaterial({
        color: 0xdddada,
        side: THREE.DoubleSide,
      });
      var mesh = new THREE.Mesh(geometry, material);
      // mesh.position.x = -500;
      // mesh.position.y = -500;
      scene.add(mesh);
    });
  },
  false
);
// ifcLoader.ifcManager.setWasmPath("static/wasm/");

// // ---------------------------------------------------------------------------------------------------
//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight("#f6f7f6", 1.5);
scene.add(ambient);

// 创建光源
const pointLight = new THREE.PointLight(0xffffff, 1, 0, 0);
// 设置光源位置
pointLight.position.set(-400, 200, -100);
scene.add(pointLight);

// 光源辅助观察,显示光源位置
const pointLightHelper = new THREE.PointLightHelper(pointLight, 100);
scene.add(pointLightHelper);

// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  10000
);

// 设置相机位置
camera.position.set(8, 8, 15);
// 设置相机观察目标
camera.lookAt(0, 0, 0);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将画布部署到html元素上
document.body.appendChild(renderer.domElement);

// 添加辅助坐标系
const axesHelper = new THREE.AxesHelper(50);
// 将坐标系添加到场景中
scene.add(axesHelper);

// 在场景中创建网格和坐标轴
// const grid = new THREE.GridHelper(100, 100);
// scene.add(grid);

renderer.setClearColor(0x444444, 1);

// 设置轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true; //鼠标松开不会立刻停下来
// 设置阻尼系数
controls.dampingFactor = 0.05;

// 监听窗口的变化
window.addEventListener("resize", () => {
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});

// 构建渲染函数
function animate() {
  // 侦听轨道控制器
  controls.update();
  // 请求动画帧函数,辅助实现WebGPU的动画效果
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
</script>
<!-- 123215 -->
